<template>
	<tui-list-cell :hover="false" :arrow="true">
		<view class="tui-line-cell">
			<view class="tui-title">
				<text v-show="rules_&&rules_[0]&&rules_[0].required" class="isrequire">*</text>
				<text >{{label}}</text>
			</view>
			<view class="tui-box tui-right" v-if="options_.range">
				<view v-if="options_.showTime">
					<text  @click="show(10),clickStart()">{{startData}}</text>
					<text> ~ </text>
					<text  @click="show(10),clickEnd()">{{endData}}</text>
				</view>
				<view v-else>
					<text @click="show(1),clickStart()">{{startData}}</text>
					<text> ~ </text>
					<text @click="show(1),clickEnd()">{{endData}}</text>
				</view>
				
			</view>
			<view v-else class="tui-box tui-right" >
				<text v-if="options_.showTime" @click="show(10)">{{result}}</text>
				<text v-else @click="show(1)">{{result}}</text>
			</view>
			<tui-dateTime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="color"
			 :setDateTime="setDateTime" :unitTop="unitTop" :radius="radius" @confirm="change"></tui-dateTime>
		</view>
	</tui-list-cell>
</template>

<script>
	export default {
		name: "kmlc-form-date",
		props: {
			label: {
				type: String
			},
			emData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			options: {
				type: Object,
				default: () => {
					return {}
				}
			},
			rules: {
				type: Array,
				default: () => {
					return []
				}
			},
			model: {
				type: String,
			},
			keyStr: {
				type: String,
			}
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				type: 1,
				startYear: 1980,
				endYear: 2030,
				cancelColor: '#888',
				color: '#5677fc',
				setDateTime: '',
				result: '请选择',
				unitTop: false,
				radius: false,
				
				startData:'请选择',
				endData:'请选择',
				clickStarted:false,
				
				date: '',
				value: '',
				options_: {},
				rules_: [],
				model_: '',
				key_: '',
				
				// range: [this.getDate(), this.getDate()],
				// rangetime: [this.getDate() + " 09:00:00", this.getDate() + " 12:00:00"]
			};
		},
		watch:{
		  	'emData.options.defaultValue':function(val){
		  	  this.result = val.value||'请选择';
			  if(this.clickStarted)
			  this.startData = val.value||'请选择';
			  else
		  	  this.endData = val.value||'请选择';
			  
			  this.data = this.result
		  	}
		},
		created() {
			// 为数据渲染
			if (this.emData && this.emData.options) {
				this.options_ = this.emData.options;
				this.rules_ = this.emData.rules;
			} else { // 一般组件使用
				this.options_ = this.options;
				this.rules_ = this.rules;
				this.model_ = this.model;
				this.key_ = this.keyStr;
			
			}
			this.date = this.emData.date;
			this.array = this.options_.options;
			this.value = this.options_.defaultValue;
		},
		methods: {
			clickStart:function(){
				this.clickStarted = true;
			},
			clickEnd:function(){
				this.clickStarted = false;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				
				let hour = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();
				hour = hour > 9 ? hour : '0' + hour;
				minutes = minutes > 9 ? minutes : '0' + minutes;
				seconds = seconds > 9 ? seconds : '0' + seconds;
				if(this.emData.options.showTime){
					return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
				}
				return `${year}-${month}-${day}`;
			},
			show: function(type) {
				this.cancelColor = '#888';
				this.color = '#5677fc';
				this.setDateTime = '';
				this.startYear = 1980;
				this.endYear = 2030;
				this.unitTop = false;
				this.radius = false;
				switch (type) {
					case 1:
						//this.setDateTime = "2019-10-12";
						this.type = 2;
						break;
					case 2:
						//this.setDateTime = "2019-11";
						this.type = 3;
						break;
					case 3:
						// this.setDateTime = "18:01";
						this.type = 4;
						break;
					case 4:
						this.type = 1;
						break;
					case 5:
						this.type = 1;
						this.setDateTime = '2019-09-12 18:01';
						break;
					case 6:
						this.type = 1;
						this.startYear = 2019;
						this.endYear = 2021;
						break;
					case 7:
						this.type = 1;
						this.cancelColor = '#555';
						this.color = '#e41f19';
						break;
					case 8:
						this.type = 5;
						this.cancelColor = '#555';
						this.color = '#e41f19';
						break;
					case 9:
						this.type = 6;
						this.cancelColor = '#555';
						this.color = '#e41f19';
						break;
					case 10:
						this.type = 7;
						this.cancelColor = '#555';
						this.color = '#e41f19';
						break;
					case 11:
						this.type = 7;
						this.cancelColor = '#555';
						this.color = '#e41f19';
						this.unitTop = true;
						break;
					case 12:
						this.type = 2;
						this.radius = true;
						break;
					default:
						break;
				}
				this.$refs.dateTime.show();
			},
			change: function(e) {
				console.log(e);
				this.result = e.result;
				
				if(this.clickStarted)
				this.startData = e.result;
				else
				this.endData = e.result;
				
				// if(this.options_.range)
				// this.data = this.startData + '~' + this.endData;
				// else
				this.data = this.result;
				
				this.$emit('onChangeVal',{value:this.data});
			}
		},
		modal: {
			prop: 'value',
			event: 'onChangeVal'
		}
	};
</script>

<style lang="scss">
	.isrequire {
		color: red;
	}

	.tui-line-cell {
		width: 100%;
		height: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		min-width: 100upx;
		line-height: 32rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.tui-box {
		flex: 1;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
	}

	.tui-input-picker {
		height: 32rpx;
		line-height: 32rpx;
		font-size: 28upx;
		background: #FFF;
		flex: 1;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
</style>
